<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            overflow: hidden;
            width: 300px;
            height: 300px;
            border: 2px solid red;
            background: linear-gradient(to top, rgba(255, 192, 203, 0), rgba(255, 192, 203, 1));
        }
        
        i {
            display: block;
            position: absolute;
            width: 350px;
            height: 220px;
            background: linear-gradient(to top, rgba(255, 192, 203, 0), rgba(255, 192, 203, 1));
            /* // transform: translateY(-30px); */
        }
    </style>
</head>

<body>
    <div id="box">
        <i></i>
        <p class="00:00">告白气球</p>
        <p class="00:04">词：方文山 曲：周杰伦</p>
        <p class="00:09">演唱：周杰伦</p>
        <p class="00:13">我爱歌词网 www.5ilrc.com</p>
        <p class="00:22">塞纳河畔 左岸的咖啡</p>
        <p class="00:26">我手一杯 品尝你的美</p>
        <p class="00:28">留下唇印的嘴</p>
        <p class="00:33">花店玫瑰 名字写错谁</p>
        <p class="00:36">告白气球 风吹到对街</p>
        <p class="00:39">微笑在天上飞</p>
        <p class="00:43">你说你有点难追 想让我知难而退</p>
        <p class="00:48">礼物不需挑最贵 只要香榭的落叶</p>
        <p class="00:54">营造浪漫的约会 不害怕搞砸一切</p>
        <p class="00:59">拥有你就拥有 全世界</p>
        <p class="01:04">亲爱的 爱上你 从那天起</p>
        <p class="01:10">甜蜜的很轻易</p>
        <p class="01:14">亲爱的 别任性 你的眼睛</p>
        <p class="01:21">在说我愿意</p>
        <p class="01:48">塞纳河畔 左岸的咖啡</p>
        <p class="01:51">我手一杯 品尝你的美</p>
        <p class="01:54">留下唇印的嘴</p>
        <p class="01:59">花店玫瑰 名字写错谁</p>
        <p class="02:01">告白气球 风吹到对街</p>
        <p class="02:04">微笑在天上飞</p>
        <p class="02:08">你说你有点难追 想让我知难而退</p>
        <p class="02:14">礼物不需挑最贵 只要香榭的落叶</p>
        <p class="02:19">营造浪漫的约会 不害怕搞砸一切</p>
        <p class="02:25">拥有你就拥有 全世界</p>
        <p class="02:29">亲爱的 爱上你 从那天起</p>
        <p class="02:36">甜蜜的很轻易</p>
        <p class="02:40">亲爱的 别任性 你的眼睛</p>
        <p class="02:47">在说我愿意</p>
        <p class="02:51">亲爱的 爱上你 恋爱日记</p>
        <p class="02:57">飘香水的回忆</p>
        <p class="03:01">一整瓶 的梦境 全都有你</p>
        <p class="03:08">搅拌在一起</p>
        <p class="03:12">亲爱的别任性 你的眼睛</p>
        <p class="03:20">在说我愿意</p>
    </div>
    <script>
        let box = document.getElementById("box")
        box.scrollBy(0, 40)
        let a = box.scrollHeight;
        console.log(a);
        box.addEventListener("click", (ev) => {
            box.scrollBy(0, 40);
            console.log(1);


        })
    </script>
</body>

</html>